Fabricjs

官方文檔

Fabric.js is a powerful and simple
Javascript HTML5 canvas library
Fabric provides interactive object model on top of canvas element
Fabric also has SVG-to-canvas (and canvas-to-SVG) parser

fabricjs 是一個更快速繪畫 canvas 的 library，我們來看看他的api：

會發現，在我們前面復刻小畫家的功能幾乎都有了呢！

Image map

Image map

使用 HTML 圖像映射，您可以在圖像上創建可點擊區域。

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

應用

你可能會好奇，為什麼這兩個會放在一起說呢？
因為我不夠時間寫文章...
從上面 Image map 可以發現，
我們要是能夠利用 Fabricjs 繪製與紀錄點，
就能做出一個 Image Map 產生器！

而這個產生器的應用可以用於哪裡呢？
有沒有訂過演唱會分區的票？

看到了嗎？其實這也是 canvas 的應用，
這裡來列一下步驟：

情境

假設我們有各種的區域分區圖

Step 1

利用 fabric js 來繪製場地分區圖，並輸出成 json

Step 2

將上面的 json 轉成 area (coords)

Step 3

底層放上 image (不放也可以，可以直接把圖片放在第二層 canvas) ， 第二層 canvas ，再接著是 <map></map>

Step 4

在 <map></map> 內的 area 觸發點擊事件，把第二層的 canvas 畫上 highlight

簡易的點擊區域 highlight 就完成啦！
很可惜因為時間的關係無法帶大家直接做程式碼，
不過根據剛才的步驟大概就可以完成一個雛形，
如果很懶得自己做出繪製區域的產生器，
網路上也有其他大神做了線上版 Imgae Map 產生器，
輸出陣列後就可以自行應用啦～
盡情發揮想像力吧！

參考

繪製Area：Image Map Creator

這裡提供有趣的 Fabricjs 應用

模擬電影倒數：movieCountDown